import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, Alert, PixelRatio } from "react-native";
import { GLOBAL } from '../../config/global';
import { homeModulesIcon } from '../../config/definition';
import { style } from '../../theme/style';
import { Common } from '../../component/common/Common';
import Permission from '../../utils/permission';

const scale = GLOBAL.SCALE;

export class RiskControlPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '风控管理',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../imgs/goBackEmpty.png')} />),
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			imgDefault: false
		};
	}

	componentWillMount () {

	}


	render () {
		const { pageStatus, imgDefault } = this.state;
		let { params } = this.props.navigation.state;
		return (
			<View style={styles.container}>
				{
					(
						<View>
							{
								params.map((item, index) => {
									const defaultImg = homeModulesIcon[item.resUrl];
									const imgUri = { uri: item.pageIcon };
									return (
										Permission.check(item.permission) ?
											<View key={index} style={styles.item}>
												<TouchableOpacity style={styles.itemTouch} activeOpacity={1} onPress={() => {
													item.isHidden === 0 ? Alert.alert('该功能努力开发中，尽请期待') : this.props.navigation.navigate(item.resUrl, item.children);
												}}>
													<Image style={styles.left}
														source={item.pageIcon ? (imgDefault ? defaultImg : item.pageIcon) : defaultImg}
														onError={(e) => {
															this.setState({ imgDefault: true })
														}} />
													<View style={styles.content}><Text style={styles.contentText}>{item.resName}</Text></View>
													<View style={styles.right}>
														<Image style={styles.rightImg} source={require('../../imgs/arrow-left.png')} />
													</View>
												</TouchableOpacity>
											</View> : null
									)
								})
							}
						</View>)
				}
			</View>
		)
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	item: {
		height: 80 * scale,
		flexDirection: 'row',
		paddingTop: 17 * scale,
		paddingBottom: 17 * scale,
		marginLeft: 22 * scale,
		marginRight: 22 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: '#e4e4e4'
	},
	itemTouch: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	left: {
		marginRight: 17 * scale,
		width: 42 * scale,
		height: 42 * scale,
	},
	content: {
		flex: 1,
	},
	contentText: {
		fontSize: 14 * scale,
		color: '#404040'
	},
	right: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center'
	},
	rightNum: {
		justifyContent: 'center',
		alignItems: 'center',
		width: 14 * scale,
		height: 14 * scale,
		marginRight: 8 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 7 * scale
	},
	rightNumText: {
		fontSize: 10 * scale,
		color: '#fff',
	},
	rightImg: {
		width: 6 * scale,
		height: 11 * scale,
	},
})